<template>
    <div class="form-group" :class="fix">
        <label :class="!upTable ? 'labelSize':'control_up_label'" :style="labelWidth"><span class="required" v-if="required">*</span>{{title}}：</label>
        <input type="text" class="form-control" :placeholder="placeholder" v-model="value" :type="type" :readonly="readOnly" :name="name" :id="name" :style="styles | style-filter upTable">
        <slot></slot>
    </div>
</template>

<script>
    import {randomId} from "./general";
    import 'assets/script/bootstrap-maxlength.js'

    export default {
        data: () => ({
            id: randomId()
        }),
        computed: {
            fix(){
              if(this.upTable){
                  return "fix_height"
              }  else{
                  return "fix_min_width"
              }
            },
            _maxlength: function () {
                if (this.maxlength == 524288) {
                    return false;
                } else {
                    return this.maxlength
                }
            }
        },
        props: {
            title: {type: String},
            type: {type: String,default: "text"},
            name: String,
            value: {type: String, default: ""},
            placeholder: {type: String,default: ""},
            readOnly: {type: Boolean, default: false},
            left: {type: String, default: 2},
            maxlength: {default: "524288"},
            required: {type: Boolean, default: false},
            upTable: {type: Boolean, default: false},
            styles: {type: String, default: 'width:265px;max-width:265px'},
            labelWidth:{type:String, default:""}

        },
        methods: {
            reset () {
                this.value = "";
            },
            get () {
                return this.value;
            },
            couponIn () {
                if (this.title === "发券数量") {
                    this.$emit('couponInput')
                }
            }
        },
        ready () {
            $('input[maxlength]').maxlength();
        },
        filters:{
            styleFilter: (value, e) => e ? (value === "width:265px;max-width:265px" ? "width:230px;max-width:230px" :value || "") : value
        }
    }
</script>
